import { Outlet, Link } from "react-router-dom";
import { Layout, Menu, Dropdown, Space, Avatar, List, Button } from "antd";
import { DownOutlined, PoweroffOutlined } from '@ant-design/icons';
import { useNavigate } from "react-router";
import "./index.css";
import React, { useState } from "react";
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  HomeOutlined,
  AppstoreOutlined,
  ShoppingCartOutlined,
  UnorderedListOutlined,
  AccountBookOutlined,
  UserOutlined,
  DollarCircleOutlined,
  SettingOutlined,
} from "@ant-design/icons";
const { Header, Sider, Content } = Layout;
//导航菜单
function getItem(label, key, icon, children, type) {
  return {
    key,
    icon,
    children,
    label,
    type,
  };
}
function roLink(tit, url) {
  return <Link to={url}>{tit}</Link>;
}

const items = [
  getItem("系统首页", "1", <HomeOutlined />, [
    getItem(roLink("系统首页", "/home"), "home"),
  ]),
  getItem("课程管理", "2", <AppstoreOutlined />, [
    getItem(roLink("图文课程", "/home/course/graphic"), "graphic"),
    getItem(roLink("视频课程", "/home/course/video"), "video"),
    getItem(roLink("音频课程", "/home/course/audio"), "audio"),
  ]),
  getItem("实物商品", "goods", <ShoppingCartOutlined />, [
    getItem(roLink("商品管理", "/home/goods"), "good"),
  ]),
  getItem("用户管理", "user", <UserOutlined />, [
    getItem(roLink("用户查询", "/home/user/query"), "query"),
    getItem(roLink("用户标签", "/home/user/userLable"), "userLable"),
    getItem(
      roLink("免费会员等级管理", "/home/user/free-member"),
      "free-member"
    ),
    getItem(roLink("付费会员卡管理", "/home/user/pay-member"), "pay-member"),
    getItem(
      roLink("会员权益", "/home/user/member-interests"),
      "member-interests"
    ),
    getItem(roLink("积分规则", "/home/user/integralRule"), "integralRule"),
    getItem(roLink("成长值规则", "/home/user/growthValue"), "growthValue"),
  ]),
  getItem("订单管理", "order", <UnorderedListOutlined />, [
    getItem(roLink("订单查询", "/home/order/search"), "orderquery"),
  ]),
  getItem("资产管理", "assets", <AccountBookOutlined />, [
    getItem(roLink("资产管理", "/home/assets"), "Assets"),
  ]),
  getItem("营销管理", "market", <DollarCircleOutlined />, [
    getItem(roLink("优惠券", "/home/market/coupons"), "coupons"),
    getItem(roLink("限时折扣", "/home/market/time-discount"), "time-discount"),
    getItem(roLink("满减满折", "/home/market/full-reduct"), "full-reduct"),
    getItem(roLink("秒杀", "/home/market/seckill"), "seckill"),
    getItem(roLink("满包邮", "/home/market/postage"), "postage"),
    getItem(roLink("满赠", "/home/market/full-give"), "full-give"),
    getItem(roLink("拼团", "/home/market/spell-group"), "spell-group"),
    getItem(roLink("套餐", "/home/market/combo"), "combo"),
    getItem(roLink("场景营销", "/home/market/sceneMarket"), "sceneMarket"),
  ]),
  getItem("设置", "setting", <SettingOutlined />, [
    getItem(roLink("banner图管理", "/home/setting/banner"), "banner"),
    getItem(roLink("员工管理", "/home/setting/staff"), "staff"),
    getItem(roLink("角色管理", "/home/setting/role"), "role"),
    getItem(roLink("操作日志", "/home/setting/log"), "log"),
    getItem(roLink("个人信息", "/home/setting/personal"), "personal"),
  ]),
];
const Home = () => {
  const [collapsed, setCollapsed] = useState(false);
  const navigate = useNavigate();
  //首页退出登录下拉框
  const menu = (
    <Menu
      items={[
        {
          label: <a onClick={() => navigate('/home/setting/personal')}><UserOutlined style={{ marginRight: '5px' }} />个人中心</a>,
          key: '0',
        },
        {
          label: <a onClick={() => navigate('/login')}><PoweroffOutlined style={{ marginRight: '5px' }} />退出系统</a>,
          key: '1',
        },
      ]}
    />
  );

  const data = [
    {
      title: '王勋强',
    },
  ];

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed} className='home-sider'>
        <div className="logo" />
        <Menu theme="dark" mode="inline" items={items} />
      </Sider>
      <Layout className="site-layout">
        <Header className="site-layout-background headerBtn">
          {React.createElement(
            collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: "trigger",
              onClick: () => setCollapsed(!collapsed),
            }
          )}

          <Dropdown overlay={menu} trigger={['click']}>
            <Button onClick={(e) => e.preventDefault()} className='btn' type='text'>
              <Space>
                <List
                  itemLayout="horizontal"
                  dataSource={data}
                  renderItem={(item) => (
                    <List.Item>
                      <List.Item.Meta
                        avatar={<Avatar src="https://joeschmoe.io/api/v1/random" />}
                        title={<a href="https://ant.design">{item.title}</a>}
                      />
                    </List.Item>
                  )}
                />
                {/* <DownOutlined /> */}
              </Space>
            </Button>
          </Dropdown>
        </Header>
        <Content
          className="site-layout-background"
          style={{
            padding: "32px 32px",
            minHeight: 280,
          }}
        >
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout >
  );
};

export default Home;
